<!DOCTYPE HTML>
<html>
<head>
    <title>Repaint test for http://bugs.webkit.org/show_bug.cgi?id=12123</title>
    <script src="../../../resources/ahem.js"></script>
    <style>
        .spacer { width: 0; height: 6px; }
        .test { border: thin dotted lightgray; margin: 2px; height: 35px; }
        .outer { border: thin solid purple; padding: 5px; width: 50px; margin-left: 50px; }
        .outer > div { height: 10px; background-color: pink; }
        .outer > div > div { width: 40px; height: 10px; background-color: lightblue; }
        span { font-family: Ahem; color: blue; }
        .box { display: -webkit-box; }
    </style>
</head>
<body>
    <div class="test">
        <div class="spacer" id="spacer1"></div>
        <div class="outer">
            <div>
                <div style="float: left; margin-left: -2px;">
                    <span style="margin-left: -2px;">x</span>
                </div>
            </div>
        </div>
    </div>

    <div class="test">
        <div class="spacer" id="spacer2"></div>
        <div class="outer">
            <div>
                <div style="float: left; margin-left: -2px;">
                    <span style="margin-left: -8px;">x</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="test">
        <div class="spacer" id="spacer3"></div>
        <div class="outer">
            <div>
                <div style="float: left; margin-left: -8px;">
                    <span style="margin-left: -2px;">x</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="test">
        <div class="spacer" id="spacer4"></div>
        <div class="outer">
            <div>
                <div style="float: left;">
                    <span style="margin-left: -8px;">x</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="test">
        <div class="spacer" id="spacer5"></div>
        <div class="outer">
            <div>
                <div style="float: left; margin-left: -8px;">
                    <span>x</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="test">
        <div class="spacer" id="spacer6"></div>
        <div class="outer box" style="-webkit-box-orient: vertical;">
            <div>
                <div style="float: left; margin-left: -8px;">
                    <span>x</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="test">
        <div class="spacer" id="spacer12"></div>
        <div class="outer box" style="-webkit-box-orient: horizontal;">
            <div>
                <div style="float: left; margin-left: -8px;">
                    <span>x</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="test">
        <div class="spacer" id="spacer7"></div>
        <table class="outer">
            <tr>
                <td style="height: 10px; background-color: pink; width: 100%;">
                    <div style="width: 40px; height: 10px; background-color: lightblue; float: left;">
                        <span style="margin-left: -4px;">x</span>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    
    <div class="test">
        <div class="spacer" id="spacer8"></div>
        <table class="outer">
            <tr>
                <td style="height: 10px; background-color: pink; width: 100%;">
                    <div style="width: 40px; height: 10px; background-color: lightblue; float: left;">
                        <span style="margin-left: -12px;">x</span>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    
    <div class="test" style="height: 50px;">
        <div class="spacer" id="spacer14"></div>
        <table class="outer" style="display: inline-table;">
            <tr>
                <td style="height: 10px; background-color: pink; width: 100%;">
                    <div style="width: 40px; height: 10px; background-color: lightblue; float: left;">
                        <span style="margin-left: -12px;">x</span>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    
    <div class="test">
        <div class="spacer" id="spacer9"></div>
        <div class="outer">
            <div>
                <div style="opacity: 0.75; float: left; margin-left: -8px;">
                    <span>x</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="test">
        <div class="spacer" id="spacer10"></div>
        <div class="outer">
            <div style="opacity: 0.75;">
                <div style="float: left; margin-left: -8px;">
                    <span>x</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="test">
        <div class="spacer" id="spacer11"></div>
        <div class="outer" style="opacity: 0.75">
            <div>
                <div style="float: left; margin-left: -8px;">
                    <span>x</span>
                </div>
            </div>
        </div>
    </div>
    <div class="test" style="height: 48px">
        <div class="spacer" id="spacer13"></div>
        <div class="outer">
            <div style="display: inline-block; height: 20px;">
                <div style="float: left; margin-left: -8px;">
                    <span>x</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
